<template>
  <div class="wrap" id="">
    <div class="search_form">
      <div class="logo"><img src="@/assets/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input
          v-model="city"
          type="text"
          class="input_txt"
          placeholder="请输入查询的天气"
          @keyup.enter="search"
        />
        <button class="input_sub" :class="{ loading: loading }" @click="search">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a @click.prevent="citySearch('北京')" href="javascript:;">北京</a>
        <a @click.prevent="citySearch('上海')" href="javascript:;">上海</a>
        <a @click.prevent="citySearch('广州')" href="javascript:;">广州</a>
        <a @click.prevent="citySearch('深圳')" href="javascript:;">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <!-- {
    "date": "05月16日",
    "temDay": "32",
    "weather": "多云",
    "temNight": "20",
    "windPower": "<3级",
    "dateFormat": "今天",
    "weatherImg": "https://hmajax.itheima.net/weather/duoyun.png",
    "windDirection": "无持续风向"
} -->
      <li v-for="(item, index) in list" :key="index">
        <div class="info_type">
          <!-- 雨 -->
          <span v-if="item.weather.includes('雨')" class="iconfont"
            >&#xe931;</span
          >
          <!-- 晴 -->
          <span v-else-if="item.weather.includes('晴')" class="iconfont"
            >&#xe933;</span
          >
          <!-- 阴 -->
          <span class="iconfont" v-else-if="item.weather.includes('阴')"
            >&#xe92d;</span
          >
          <!-- 雪 -->
          <span class="iconfont" v-else-if="item.weather.includes('雪')"
            >&#xeb87;</span
          >
          <!-- 云 -->
          <span class="iconfont" v-else-if="item.weather.includes('云')"
            >&#xeb79;</span
          >
          <!-- 雷 -->
          <span class="iconfont" v-else-if="item.weather.includes('雷')"
            >&#xeb77;</span
          >
          <!-- 雹 -->
          <span class="iconfont" v-else-if="item.weather.includes('雹')"
            >&#xeb76;</span
          >
          <!-- 雾 -->
          <span class="iconfont" v-else>&#xeb75;</span>
        </div>
        <div class="info_temp">
          高 <b>{{ item.temDay }}℃</b><br />低 {{ item.temNight }}℃
        </div>
        <div class="info_date">
          <b>{{ city }}</b
          ><span>{{ item.date }}</span>
        </div>
      </li>
    </ul>
    <!-- 下面是模板 -->
    <div class="tem">
      <h2>模板</h2>
      <!-- 雨 -->
      <span class="iconfont">&#xe931;</span>
      <!-- 晴 -->
      <span class="iconfont">&#xe933;</span>
      <!-- 阴 -->
      <span class="iconfont">&#xe92d;</span>
      <!-- 雪 -->
      <span class="iconfont">&#xeb87;</span>
      <!-- 云 -->
      <span class="iconfont">&#xeb79;</span>
      <!-- 雷 -->
      <span class="iconfont">&#xeb77;</span>
      <!-- 雹 -->
      <span class="iconfont">&#xeb76;</span>
      <!-- 雾 -->
      <span class="iconfont">&#xeb75;</span>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  // 1:完成输入框输入内容后点击按钮调用接口获取天气数据

  // axios
  // 1:下载插件  npm i axios -f
  // 2:导入  import axios from 'axios'
  // 3:使用
  //  axios({
  // url:'接口请求地址',
  // method:'get/post',
  // params:{get请求传参},
  // data:{post请求传参}}).then((res)=>{res请求成功的的返回值}).catch((err)=>{err就是请求失败的错误信息})

  data () {
    return {
      city: '',
      list: [],
      loading: false
    }
  },
  methods: {
    citySearch (city) {
      this.city = city
      this.search()
    },
    async search () {
      this.loading = true
      // const:定义静态变量（不更改堆）
      // const user = { age: 20 }
      // user.age = 21
      // console.log(user)
      const res = await axios({
        url: 'https://hmajax.itheima.net/api/weather/city',
        params: {
          city: this.city
        }
      })
      const res2 = await axios({
        url: 'https://hmajax.itheima.net/api/weather',
        params: {
          city: res.data.data[0].code
        }
      })
      this.loading = false
      this.list = res2.data.data.dayForecast
      // .then(res => {
      //   console.log(res.data.data[0].code)
      //   axios({
      //     url: 'https://hmajax.itheima.net/api/weather',
      //     params: {
      //       city: res.data.data[0].code
      //     }
      //   }).then(res => {
      //     this.loading = false
      //     this.list = res.data.data.dayForecast
      //     console.log('城市天气数据', res)
      //   })
      // })
    }
  }
}
</script>
<style>
@import url('~@/styles/css/reset.css');
@import url('~@/styles/css/iconfont.css');
@import url('~@/styles/css/main2.css');
.tem .iconfont {
  font-size: 50px;
}
</style>
